<template>
    <div id="camera-equipment-video" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column prop="name" :label="$t('ztu0TpvwBrwVxA1Hahd4A')" align="center" />
                                        <el-table-column prop="app" :label="$t('ctTqEOzqHdOsdSZnWGxcw')" align="center" />
                                        <el-table-column prop="stream" :label="$t('owJeOtVpxeakTzEvEBk')"   align="center" />
                                        <el-table-column prop="time" :label="$t('pkI5_4TekErRoq77hhuMx')"   align="center" />
                                        <el-table-column :label="$t('rQ5NRdsIr9n8f_8WvQuu')" align="center" >
                                            <template #default="scope">
                                                <el-button @click="showDrawerEvent(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('b6TYx9jDZpHwIlu0CbhoE') }} </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <cameraVideoFileList :showDrawer="showDrawer" :currentItem="currentItem"  @closeAddDialogHandler="closeAddDialogHandler"/>
    </div>
  
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import getTableData from '/@/utils/getTableData'
import { getQueryDeviceVideoListApi } from '/@/api/its/camera'
import cameraVideoFileList from './component/cameraVideoFileList.vue'
export default defineComponent( {
    name: 'camera-equipment-video',
    components:{
        cameraVideoFileList
    },
    setup(props){
        const currentItem: any = ref<any>({});
        const showDrawer = ref(false);
        const showDrawerEvent = (row: any) => {
            currentItem.value.app = row.app;
            currentItem.value.stream = row.stream;
            currentItem.value.searchDate = row.time;
            showDrawer.value = true;
        }

        const closeAddDialogHandler = () => {
            showDrawer.value = false;
            currentItem.value = {}
        }

        /*** onMounted 页面加载时显示 */
        onMounted(() => {});

        return {
            ...getTableData(getQueryDeviceVideoListApi,{},{}),
            showDrawerEvent,
            closeAddDialogHandler,
            showDrawer,
            currentItem
        }
    },
} )
</script>
<style scoped lang="scss">
    #camera-equipment-video {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .title-stl {
            color: #0052D9;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
                cursor: pointer;
            }
        }
    }

    :deep(.el-pagination){
            display: flex !important;
    justify-content: flex-end !important;

        }

   ::v-deep .el-table th.el-table__cell {
    // background-color:none !important;
    background-color: var(--el-table-header-bg-color) !important;
}
</style>